<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<body id="body" align="center">
<h1 id="a">作业情况</h1>
<style>
    /*边框*/
    #a{
        text-shadow: 2px 2px 5px red;
    }
    #body{
        background-image: url("../images/background.5f3d18b4.png");
        width: 100%;
        height: 100%;
    }
    #ta{
        padding: 25px;
    }
    table.imagetable {

        height: 50px;
        font-family: verdana,arial,sans-serif;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        position: fixed;

        right: 11%;
    }
    table.imagetable th {
        background:#b5cfd2 url('cell-blue.jpg');
        border-width: 1px;
        font-size:18px;
        width:80px;
        height:40px;
        overflow:hidden;
        padding: 20px;
        border-style: solid;
        border-color: #999999;
    }
    table.imagetable td {
        background:#dcddc0 url('cell-grey.jpg');
        border-width: 1px;
        font-size:13px;
        width:80px;
        height:40px;
        overflow:hidden;
        padding: 20px;
        border-style: solid;
        border-color: #999999;
    }
    /*设置下拉按钮*/
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    .dropdown-content a:hover {background-color: #f1f1f1}
    .dropdown:hover .dropdown-content {
        display: block;
    }
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    .dropbtn{
        text-shadow: 2px 2px 5px red;
    }
    .solid{
        border-style: solid;
    }
    /*.eyes{
            perspective: 1000px;
        }*/
    .box{
        /*设置3D效果*/
        transform-style: preserve-3d;
        /*盒子的大小*/
        width: 150px;
        height: 150px;
        /*background: url(img/u=2876088324,162444881&fm=26&gp=0.jpg)no-repeat;*/

        /*设置盒子的位置，便于观察*/
        position: fixed;
        bottom: 10%;
        right: 6%;
        /*复合方式设置动画 三者分别为：动画名 执行一次时间 执行方式*/
        animation: zhuan 10s ease;
        /*令动画无限执行下去*/
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .box div{
        width: 150px;
        height: 150px;
        opacity: 1;
        /*设置过渡*/
        transition: all 2s ease 0s;
        position: absolute;
    }
    /*调整位置，制作成一个六边形*/
    .box .div1{
        /* background: green;*/
        transform: translateZ(75px);
    }
    .box .div2{
        /*background: green;*/
        transform: translateZ(-75px);
    }
    .box .div3{
        /* background: green;*/
        transform: rotateX(90deg) translateZ(75px);
    }
    .box .div4{
        /*background: green;*/
        transform: rotateX(270deg) translateZ(75px);
    }
    .box .div5{
        /*  background: green;*/
        transform: rotateY(-90deg) translateZ(75px);
    }
    .box .div6{
        /* background: green;*/
        transform: rotateY(90deg) translateZ(75px);
    }
    /*添加3D旋转效果 让其绕X、Y轴同时旋转90度*/
    @keyframes zhuan{
        from{
            transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
        }
        to{
            transform: rotateX(720deg) rotateZ(720deg) rotateY(720deg);
        }
    }
    /*给正方体添加一个hover效果*/
    .box:hover .div1{
        transform: translateZ(150px);
    }
    .box:hover .div2{
        transform: translateZ(-150px);
    }
    .box:hover .div3{
        transform: rotateX(90deg) translateZ(200px);
    }
    .box:hover .div4{
        transform: rotateX(270deg) translateZ(200px);
    }
    .box:hover .div5{
        transform: rotateY(-90deg) translateZ(200px);
    }
    .box:hover .div6{
        transform: rotateY(90deg) translateZ(200px)
    }
    th {
        background-color: #4CAF50;
        color: white;
    }
    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    a:active {
        text-decoration: underline;
    }
    #div1{

        display: none;

        position: absolute;

        left:50%;

        top:50%;

        width:250px;

        height:150px;

        background-color:gray;

        text-align: center;

    }

    #open{

        position: absolute;

        top:50%;

        left:50%;

        width:100px;

        height:50px;
    }
    .mydiv{
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-200px;
        margin-top:-130px;
        display:none;
    }
    .button {
        background-color: #409eff; /* 蓝色 */
        border: none;
        color: white;
        padding: 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 4px 2px;
        cursor: pointer;
    }
    .button4 {border-radius: 12px;}
    fieldset, ol ,li{
        padding:0;
        margin:0;
    }
    ol{
        list-style:none;
    }
    body{
        background:#fff;
        color:#111;
        padding:20px;
    }
    form#payment{
        background:#00ffff;
        -webkit-border-radius:5px;
        border-radius:5px;
        padding:20px;
        width:400px;
    }
    form#payment fieldset{
        border:none;
        margin-bottom:10px;
    }
    form#payment fieldset:last-of-type{ margin-bottom:0; }
    form#payment legend{
        color:#384313;
        font-size:16px;
        font-weight:bold;
        padding-bottom:10px;
        text-shadow:0px 1px 1px #c0d576;
    }
    form#payment > fieldset>legend:before{
        content:"Step" counter(fieldset)":";
        counter-increment:fieldsets;
    }
    form#payment fieldset fieldset legend{
        color:#111;
        font-size:13px;
        font-weight:normal;
        padding-bottom:0;
    }
    form#payment ol li{
        background:#b9cf6a;
        background:rgba(255, 255, 255, 0.3);
        border:#e3ebc3;
        border-color:rgba(255, 255, 255, 0.6);
        border-style:solid;
        border-width:2px;
        -webkit-border-radius:5px;
        line-height:30px;
        padding:5px 10px;
        margin-bottom:2px;
    }
    form#payment ol ol li{
        bakcground:none;
        border:none;
        float:left;
    }
    form#payment label{
        float:left;
        font-size:17px;
        width:110px;
    }
    form#payment fieldset fieldset label{
        background:none no-repeat left 50%;
        line-height:20px;
        padding:0 0 0 30px;
        width:auto;
    }
    form#payment fieldset fieldset label:hover{cursor:pointer;}
    form#payment input:not([type=radio]), form#payment textarea{
        background:#fff;
        border:#fc3 solid 1px;
        -webkit-border-radius:3px;
        outline:none;
        padding:5px;
    }
    * {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 50px 50px;
    }
    .btn-select {
        position: relative;
        display: inline-block;
        width: 150px;
        height: 25px;
        background-color: #f80;
        font: 14px/20px "Microsoft YaHei";
        color: #fff;
    }
    .btn-select .cur-select {
        position: absolute;
        display: block;
        width: 150px;
        height: 25px;
        line-height: 25px;
        background: #f80 url(ico-arrow.png) no-repeat 125px center;
        text-indent: 10px;
    }
    .btn-select:hover .cur-select {
        background-color: #f90;
    }
    .btn-select select {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 25px;
        opacity: 0;
        filter: alpha(opacity: 0;);
        font: 14px/20px "Microsoft YaHei";
        color: #f80;
    }
    .btn-select select option {
        text-indent: 10px;
    }
    .btn-select select option:hover {
        background-color: #f80;
        color: #fff;
    }

</style>

    <div class="dropdown"  id="myform">
        <button class="dropbtn">请选择月份</button>
        <div class="dropdown-content" >
            <a href="/examproject/stu/addhom?ctime=01">一月</a>
            <a href="/examproject/stu/addhom?ctime=02">二月</a>
            <a href="/examproject/stu/addhom?ctime=03">三月</a>
            <a href="/examproject/stu/addhom?ctime=04">四月</a>
            <a href="/examproject/stu/addhom?ctime=05">五月</a>
            <a href="/examproject/stu/addhom?ctime=06">六月</a>
            <a href="/examproject/stu/addhom?ctime=07">七月</a>
            <a href="/examproject/stu/addhom?ctime=08">八月</a>
            <a href="/examproject/stu/addhom?ctime=09">九月</a>
            <a href="/examproject/stu/addhom?ctime=10">十月</a>
            <a href="/examproject/stu/addhom?ctime=11">十一月</a>
            <a href="/examproject/stu/addhom?ctime=12">十二月</a>
        </div>
    </div>
<input type="button" class="button button4" onclick="ondiv()" value="增加">
<table class="imagetable"  cellpadding="1px" id="mytable" align="center">
    <tr id="ta">
        <th id="a6" class="solid">学生编号</th>
        <th id="a7" class="solid">学生姓名</th>
        <th id="a8" class="solid">学生班级</th>
        <th id="a9" class="solid">学生性别</th>
        <th id="a2" class="solid">考勤</th>
        <th id="a3" class="solid">作业</th>
        <th id="a4" class="solid">没做天数</th>
        <th id="a5" class="solid">备注</th>
        <th id="a10" class="solid">管理</th>

    </tr>

    <c:forEach items="${list}" var="n" >
        <tr id="tb" >
            <td class="solid" style="display:none;">${n.id}"</td>
            <td class="solid">${n.studentId}</td>
            <td class="solid">${n.stname}</td>
            <td class="solid">${n.classId}</td>
            <td class="solid">${n.stsex}</td>
            <td class="solid">${n.checkIn}</td>
            <td class="solid">${n.work}</td>
            <td class="solid">${n.ctime}</td>
            <td class="solid">${n.remark}</td>
            <td class="solid"><a href="/examproject/stu/delhom?id=${n.id}&ctime=${n.ctime} " onclick="return confirm('你确定删除吗')">删除</a> </td>
        </tr>
    </c:forEach>
</table>
</select>
<div class="eyes">
    <div class="box">
        <div class="div1"><img src="images/index06.png" width="100%" height="100%"></div>
        <div class="div2"><img src="images/index01.png" width="100%" height="100%"></div>
        <div class="div3"><img src="images/index02.png" width="100%" height="100%"></div>
        <div class="div4"><img src="images/index03.png" width="100%" height="100%"></div>
        <div class="div5"><img src="images/index04.png" width="100%" height="100%" ></div>
        <div class="div6"><img src="images/index05.png" width="100%" height="100%" ></div>
    </div>
</div>
<div id="div1">

    <table>

        <tr><td>班级</td><td><input type="text"></td></tr>
        <tr><td>姓名</td><td><input type="text"></td></tr>
        <tr><td>电话</td><td><input type="text"></td></tr>
        <tr><td>性别</td><td><input type="text"></td></tr>
        <tr><td>微信</td><td><input type="text"></td></tr>

    </table>

    <a href="javascript:CloseDiv();">关闭</a>

</div>

<div class="mydiv" id="mydiv" ><!-- 增加 -->

    <form action="/examproject/stu/addid" method="post" id=payment>
        <fieldset>
            <a class="gb" href="#" style="width:100%; margin-left:99%;margin-right:0%;height: 10px">X</a>
            <ol>

                <li>
                  <label >姓名:</label>
                    <input type="text"  name="stname" required>
                </li>
                <li>
                    <label >考勤:</label>
                    <input type="text"  name="checkIn" required>
                </li>
                <li>
                    <label >作业:</label>
                    <input type="text"  name="work" required>
                </li>
                <li>
                    <label >时间:</label>
                    <input type="date"  name="ctime" required>
                </li>
                <li>
                    <label >备注:</label>
                    <input type="text"  name="remark" required>
                </li>
            </ol>
        </fieldset>

        <fieldset colspan=2>
            <button type="submit" onclick="aaaa()">添加</button>
        </fieldset>
    </form>

</div>
</body>
<script type="text/javascript">
    var bx=<%=session.getAttribute("bx")%>;
    if(bx==false){
        alert("用户不存在");
    }
    function ondiv(){
        document.getElementById("mydiv").style.display="block";
    }
    window.onload=function() {
        var mydiv = document.querySelector(".mydiv");
        var as = document.querySelectorAll(".xg");
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                console.log(this);
                //显示盒子
                mydiv.style.display = 'block';
                var tr = this.parentNode.parentNode;
                var tds = tr.children;
                var inps = document.querySelectorAll(".myfm input");
                for (var k = 0; k < 5; k++) {
                    inps[k].value = tds[k].innerHTML;
                }
                console.log(tr);
            }
        }
        //点空白区域时
        var gba = document.querySelector(".gb");
        gba.onclick = function () {
            mydiv.style.display = 'none';
        }

    }
</script>
</html>
